<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){

            $("#ullist img").click(function (){
                let attr = $(this).attr("src");
                attr = attr.replace(".jpg",".mp4")
                // alert(attr)
                let player = document.querySelector('#vidworoot')
                player.src = attr
                player.play()

            })
        })
    </script>
</head>
<body>
<p>一张好图</p>
<div style="text-align: center">
    <video id="vidworoot" style="max-width: 1000px; max-height: 1000px"  muted controls preload="auto" loop="loop" autoplay="autoplay"  data-setup="{'autoplay':true}"><source id="vidiodiv" src="{{lists[0]}}" type="video/mp4"></video>

</div>
<div style="text-align: center">
    <a href="/m/{{pageup}}" style="margin: 50px">上一个</a>
    <a href="/m/{{pagedown}}" style="margin: 50px">下一个</a>

</div>


<ul id="ullist">
    {% for bean in lists %}
    <li style="float: left;padding-left: 10px">
      <img src="{{bean}}" width="100px" height="50px" >

    </li>
    {% endfor %}
</ul>

</body>
</html>